import { createReactBlockSpec } from "@blocknote/react";
import { NumberSize, Resizable } from "re-resizable";
import { Direction } from "re-resizable/lib/resizer";
import { useEffect, useRef, useState } from "react";
import { DrawIoEmbed, DrawIoEmbedRef, EventExport, EventLoad } from "react-drawio";
import { defaultImg } from "./defaultValue";
import { Modal } from "antd";
import styled from 'styled-components';

const FullModal = styled(Modal)`
      .ant-modal-content {
        padding: 0;
      }
    `

export const DrawIO = createReactBlockSpec({
  type: 'draw',
  propSchema: {
    width: {
      default: '',
    },
    height: {
      default: '',
    },
    data: {
      default: '',
    },
    image: {
      default: defaultImg,
    }
  },
  content: 'none',
}, {
  render: ({ block, editor }) => {
    const drawioRef = useRef<DrawIoEmbedRef | null>(null)
    const [isOpen, setIsOpen] = useState(false)

    const onResizeStop = (event: MouseEvent | TouchEvent, direction: Direction, elementRef: HTMLElement, delta: NumberSize) => {
      editor.updateBlock(block, {
        props: {
          width: (elementRef.clientWidth + 1).toString(),
          height: (elementRef.clientHeight + 1).toString(),
        }
      })
    }

    const onExport = (data: EventExport) => {
      editor.updateBlock(block, {
        props: {
          data: data.xml,
          image: data.data,
        }
      })
      setIsOpen(false)
    }

    useEffect(() => {
      if (drawioRef.current) {
        // drawioRef.current.configure({
        //
        // })
      }
    }, [drawioRef])

    return <div style={{
      display: 'block',
    }}>
      <Resizable
        style={{
          border: '1px solid #ccc',
          overflow: 'hidden',
        }}
        size={{
          width: block.props.width,
          height: block.props.height,
        }}
        lockAspectRatio={true}
        onResizeStop={onResizeStop}
      >
        <img
          style={{
            width: '100%',
            height: '100%',
          }}
          src={block.props.image}
          onDoubleClick={() => {
            setIsOpen(true)
          }}

        />
      </Resizable>
      <FullModal
        open={isOpen}
        style={{
          maxWidth: "100vw",
          top: 0,
          padding: 0,
        }}

        styles={{
          body: {
            height: "calc(100vh - 12px)",
          }
        }}
        width={'100%'}
        closeIcon={<></>}

        footer={[]}
      >
        <DrawIoEmbed
          ref={drawioRef}
          urlParameters={{
            ui: 'simple',
            saveAndExit: false,
            noExitBtn: false,
            noSaveBtn: true,
          }}
          xml={block.props.data}
          onExport={onExport}
          onClose={(data) => {
            drawioRef.current?.exportDiagram({
              format: 'xmlsvg',
              transparent: false,
              grid: true,
              scale: 1.5,
              shadow: true
            })
          }}
        />
      </FullModal>
    </div >
  }
})
